<template>
  <div class="earth-small"></div>
</template>

<script>
const THREE = require('three');

function mounted(){
  var height = window.innerHeight * 215 / 1080
  var width  = height
  var loader = new THREE.TextureLoader();
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
  camera.position.z = 900;
  var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  renderer.setSize(width, height);
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(0, 0 , 500);
  scene.add(light);
  //地球
  var material = new THREE.MeshPhongMaterial({
    map: loader.load(require('./img/main-block-1-global-world.png'))
  })
  material.transparent = true
  var earth = new THREE.Mesh(
    new THREE.SphereGeometry(200, 32, 32),
    material
  )
  scene.add(earth)

  //动画循环
  function render() {
    earth.rotation.y += 0.005;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();

  this.$el.appendChild(renderer.domElement);
}


export default {
  name: 'earth-small',
  mounted
}
</script>
